<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="article_content">
      <div class="wrapper">
        <!-- 标题 -->
        <div class="top">{{ name }}</div>
        <!-- 栏目对应的文章标题 -->
        <div class="bottom">
          <div class="parent">
            <div class="left">
              <div class="a_top">
                <h3>栏目导航</h3>
              </div>
              <div class="a_l_nav">
                <ul>
                  <li @click='toArticle(item.category)' v-for="item in categories" :key='item.id'>
                    <span>{{item.category.name}}</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="right">
              <div class="article_title">
                <h3>{{name}}</h3>
              </div>
              <div class="list_top">
                <span>标题</span>
                <span>日期</span>
                <span>阅读量</span>
              </div>
              <div class="show">
                <ul v-if='total>0'>
                <li @click='toDetails(item.id)' v-for="item in columns" :key="item.id">
                  <span><img src="@/assets/yxtx/dian2.jpg" alt="">{{ item.title }}</span>
                  <span>{{ item.publishTime | fmtDate }}</span>
                  <!-- Vue.filter('fmtDate',fmtDate) -->
                  <span>{{ item.readTimes }}</span>
                </li>
              </ul>
              <div v-else style="text-align:center;color:red">暂无数据</div>
              </div>
              <!-- 分页按钮 -->
              <el-pagination
                class="page"
                background
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.page"
                :page-sizes="[2, 4, 5, 8]"
                :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
              >
                              <!-- hide-on-single-page -->
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>
</template>
<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      name: "",
      id: "",
      total: 0,
      //存放分页对象
      params: {
        page: 1,
        pageSize: 5,
      },
      // 栏目信息
      columns: [],
      categories:[],
    };
  },
  // 监听器属性/侦听器属性
  // 监听数据类型变化
  // 监听基本数据类型使用浅监听
  // 监听引用数据类型使用深度监听
  watch: {
    "$route.query": {
      handler() {
        this.name = this.$route.query.name;
        this.id = this.$route.query.id;
        this.getArticleById();
      },
      deep: true,
    },
  },
  methods: {
    // 跳转到文章详情页面
    toDetails(id){
      // a-->item.id
      // 编程式导航
      this.$router.push({
        path:'/list',
        query:{id}
      })
    },
    toArticle(item){
      // 编程式导航跳转
      this.$router.push({
        path:"/article",
        query:item
      })
    },
    // 监听页码条数发生改变的事件处理程序
    handleSizeChange(pageSize) {
      // console.log(pageSize, `每页${pageSize}条数`);
      this.params.pageSize=pageSize;
      this.params.page=1;
      this.getArticleById();
    },
    // 监听页码发生改变得方法
    handleCurrentChange(page) {
      // console.log(page, `第${page}页`);
      this.params.page=page;
      this.getArticleById();
    },
    // 根据栏目id获取对应栏目文章
    async getArticleById() {
      this.params.categoryId = this.id;
      let res = await get("/index/article/pageQuery", this.params);
      // console.log(res, "获取响应");
      this.columns = res.data.list;
      this.total = res.data.total;
    },
    async getCategory(){
      let res = await get('/index/article/findCategoryArticles');
      // console.log(res.data);
      this.categories = res.data;
    },
  },
  created() {
    // 接收参数
    // console.log(this.$route.query,'1111');
    // 栏目名称
    this.name = this.$route.query.name;
    // 栏目id
    this.id = this.$route.query.id;
    this.getArticleById();
    this.getCategory();
  },
};
</script>
<style lang="scss">
// 体部样式
.article_content {
  // height: calc(100vh - 0px);
  background-color: #ecf6f2;
  padding: 2em 1.5em;
  .wrapper {
    .top {
      font-size: 28px;
      color: #014791;
      line-height: 20px;
    }
    .bottom {
      margin-top: 20px;
      .parent {
        display: flex;
        min-height: 470px;
        .right {
          width: 75%;
          margin-left: 15px;
          background-color: #fff;
          border: 1px solid #e5e5e5;;
          .article_title{
            height: 40px;
            overflow: hidden;
            border: 1px solid #e5e5e5;
            h3{
              height: 20px;
              margin-top: 10px;
              margin-left: 10px;
              padding-left: 15px;
              border-left: 4px solid #be5b24;
              font-size: 16px;
              color: #333333;
            }
          }
          .list_top{
            // display: flex;
            padding: 0 20px;
            overflow: hidden;
            background: #f9f9f9;
            border-left: 1px solid #e5e5e5;
            border-right: 1px solid #e5e5e5;
            span{
              line-height: 40px;
              font-size: 14px;
              color: black;
            }
            span:nth-child(1){
              display: inline-block;
              width: 74%;
              text-align: center;
            }
            span:nth-child(2){
              display: inline-block;
              width: 13%;
              margin: 0 1%;
              text-align: center;
            }
            span:nth-child(3){
              display: inline-block;
              width: 10%;
              text-align: center;
            }
          }
          .show{
              ul {
              // padding:2em 1em;
              li {
                padding: 0 20px;
                line-height: 60px;
                border-bottom: 1px solid #ececec;
                color: black;
                font-size: 16px;
                span:nth-child(1){
                  // height: 41px;
                  // line-height: 31px;
                  vertical-align: bottom;
                  overflow: hidden; //多余的部分隐藏
                  white-space: nowrap; //让文字强制一行显示
                  text-overflow: ellipsis; //多余的部分显示省略号
                  display: inline-block;
                  width: 74%;
                  cursor: pointer;
                  // text-align: center;
                }
                span:nth-child(2){
                  display: inline-block;
                  width: 13%;
                  margin: 0 1%;
                  text-align: center;
                }
                span:nth-child(3){
                  display: inline-block;
                  width: 10%;
                  text-align: center;
                }
                // span:last-child {
                //   margin-left: 20px;
                //   display: inline-block;
                // }
                span:nth-child(1):hover{
                  color: #990000;
                  text-decoration: underline;
                }
              }
            }
          }
          .page{
            text-align: center;
            margin: 20px 0;
          }
        }
        .left {
          border: 1px solid #e5e5e5;
          background-color: white;
          width: 20%;
          height: 280px;
          .a_top{
            // width: 300px;
            background-color: #fff;
            height: 55px;
            padding-left: 40px;
            background: url('../assets/yxtx/xwgk_condian.png') 20px 50% no-repeat #be5b24;
            line-height: 55px;
            h3{
              margin: 0px;
              color: #FFFFFF;
              font-size: 16px;
              font-family: "微软雅黑";
            }
          }
          .a_l_nav{
            padding: 20px;
            ul{
              li{
                overflow: hidden;
                background: url('../assets/yxtx/xwgk_sjx.png') 10px 50% no-repeat;
                line-height: 35px;
                border-bottom: 1px solid #e5e5e5;
                padding: 0 0 0 15px;
                font-size: 16px;
                color: black;
                span{
                  cursor: pointer;
                }
                span:hover{
                  color: #990000;
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>